<template>
	<view class="tab-bar">
		<view :class="['tab-bar_item', active === item.id ? 'active' : '']" v-for="item in tabbarList" :key="item.id" @click="onClcik(item)">
			<image :src="item.icon" mode=""></image>
			<text>{{ item.name }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		active: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			tabbarList: [
				{
					id: 0,
					icon: '../static/shouyea.png',
					name: '首页',
					path: '/pages/content/content'
				},
				{
					id: 1,
					icon: '../static/xiangce1.png',
					name: '相册',
					path: '/pages/xiangce/xiangce'
				},
				{
					id: 2,
					icon: '../static/women.png',
					name: '我们',
					path: '/pages/women/women'
				}
			]
		};
	},
	methods: {
		onClcik(item) {
			uni.navigateTo({
				url: item.path
			})
		}
	}
};
</script>

<style scoped lang="scss">
.tab-bar {
	// position: fixed;
	// bottom: 0;
	// left: 0;
	width: 100vw;
	height: 100rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	&_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 10rpx;
		}
		text {
			color: #000;
		}
	}
}
	
</style>
